import React from "react";
import { withRouter, useHistory } from "react-router";
import { Link, useLocation, useRouteMatch } from "react-router-dom";
// import classnames from "classnames";

// import { BrowserRouter as Router, Switch, Route, Link, useRouteMatch } from "react-router-dom";

import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";

import service from "../service"

const useStyles = makeStyles((theme) => ({
	root: {
		flexGrow: 1,
	},
	menuButton: {
		marginRight: theme.spacing(2),
	},
	title: {
		flexGrow: 1,
	},
	link: {
		margin: theme.spacing(1, 1.5),
	},
}));

export default function Nav(props) {
	let location = useLocation();
	let history = useHistory()
	async function handelSignout(){
		await service.users.signout()
		history.push("/")
	}
	const classes = useStyles();
	return (
		<AppBar position="static">
			<Toolbar>
				<IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
					<MenuIcon />
				</IconButton>

				<Typography variant="h6" className={classes.title}>
					Assetik
				</Typography>
				{"/" != location.pathname && (
					<>
						<Button color="inherit" component={Link} to="/project">
							项目
						</Button>
						<Button color="inherit" component={Link} to="/element">
							元素
						</Button>
						<Button color="inherit" onClick={handelSignout}>
							退出
						</Button>
					</>
				)}
			</Toolbar>
		</AppBar>
	);
}
// }

// export default withRouter(Nav);
